<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box1{width:300px;height:300px;background: red;position: absolute;left:0;right:0;top:0;bottom:0;margin: auto;}
    .box2{width:200px;height:200px;background: green;position: absolute;left:0;right:0;top:0;bottom:0;margin: auto;}
    .box3{width:100px;height:100px;background: blue;position: absolute;left:0;right:0;top:0;bottom:0;margin: auto;}
    span{width:30px;height:30px;background: yellow;position: absolute;left:0;right:0;top:0;bottom:0;margin: auto;}
  </style>
</head>
<body>

  <div class="box1">
    <div class="box2">
      <div class="box3">
        <span></span>
      </div>
    </div>
  </div>
  
</body>
<script>

  var box1 = document.querySelector(".box1");
  var box2 = document.querySelector(".box2");
  var box3 = document.querySelector(".box3");
  var span = document.querySelector("span");

  box1.addEventListener("click", function(){
    console.log("捕获的red")
  }, true)
  box1.addEventListener("click", function(){
    console.log("冒泡的red")
  }, false)

  box2.addEventListener("click", function(){
    console.log("捕获的green")
  }, true)
  box2.addEventListener("click", function(){
    console.log("冒泡的green")
  }, false)

  box3.addEventListener("click", function(){
    console.log("捕获的blue")
  }, true)
  box3.addEventListener("click", function(){
    console.log("冒泡的blue")
  }, false)

  span.addEventListener("click", function(){
    console.log("捕获的yellow")
  }, true)
  span.addEventListener("click", function(){
    console.log("冒泡的yellow")
  }, false)

  
</script>
</html>